<script setup>
import {useCounterStore} from "@/stores/counter.js"
import {ref, computed} from "vue";
import "@/assets/ml/planeSearch.css"
import { getMinPrice, getCompany, getPlaneList} from "@/api/plane.js";
import router from "@/router/index.js";


const getPlaneData = useCounterStore
const area1 = ref(getPlaneData().planeAreaName1)
const area2 = ref(getPlaneData().planeAreaName2)
const date = ref(getPlaneData().planeDate)
const updateArea = () => {
  let areaTemp = area1.value
  area1.value = area2.value
  area2.value = areaTemp
}
const dateData = ref([
  {date: '03-01', week: '周六', price: '300'},
  {date: '03-02', week: '周日', price: '450'},
  {date: '03-03', week: '周一', price: '1160'},
  {date: '03-04', week: '周二', price: '384'},
  {date: '03-05', week: '周三', price: '347'},
  {date: '03-06', week: '周四', price: '334'},
]);

const activeDate = ref(0);

const time=ref([
  {time:"凌晨（00:00-：5：59）",price:"",status:false},
  {time:"上午（06:00-：11：59）",price:"",status:false},
  {time:"下午（12:00-：17：59）",price:"",status:false},
  {time:"晚上（18:00-23：59）",price:"",status:false}
])
const companyList=ref([])

const switchDate = (index) => {
  activeDate.value = index;
  date.value=dateData.value[index].date
  // date.value=dateData[index].date
};
const activeContent = computed(() => {
  return contentMap[activeDate.value] || null;
});
const getPriceList = async () => {
  const res=await getMinPrice(area1.value,area2.value)
  dateData.value=res.data.data
}
  const getCompanyList = async () => {
    const res= await getCompany(date.value)
    companyList.value=res.data.data
    console.log(companyList.value)
  }

  const sz = ref([
      false,
      false,
      false
  ])

const planeArr=ref([])
const getPlaneArr=async ()=>{
  const res=await getPlaneList(date.value,area1.value,area2.value,false,false,false,false,false,false,false)
  console.log(res)
  planeArr.value=res.data.data
}

const buy=(id)=>{router.push({path:"/flydingdan",query:{id:id}})}

getCompanyList()
getPriceList()
getPlaneArr()
</script>

<template>
  <div style="background: #f3f5f9;height: 100%">

<!-- 表单搜索 -->
    <div class="plane-top main">
      <div>
        <el-input v-model="area1" style="width: 240px;height: 37px" placeholder="Please input"/>
      </div>
      <div><span class="type_item_change" @click="updateArea"></span></div>
      <div>
        <el-input v-model="area2" style="width: 240px;height: 37px" placeholder="Please input"/>
      </div>
      <div>
        <el-date-picker v-model="date" style="width: 400px;height: 37px" type="date" placeholder="Pick a day"
                        value-format="YYYY-MM-DD"/>
      </div>
      <div>
        <button>搜索</button>
      </div>
    </div>

<!-- 日期选择区域-->
    <div class="date-selector-container plane-tabs main">

      <div class="date-list">
        <div
            v-for="(item, index) in dateData"
            :key="index"
            class="date-item"
            :class="{ 'active': activeDate === index }"
            @click="switchDate(index)"
        >
          <div class="date-info">
            <span class="date">{{ item.date.substring(5) }}</span>
            <span class="week">{{ item.week }}</span>
          </div>
          <div class="price">￥{{ item.price }}</div>
        </div>
      </div>
    </div>

    <div class="dataContainter">
<!--      内容左-->
      <div class="selectContainer">
        <div class="filters">
          <span class="label-title">筛选</span>
          <div class="flter-main">
            <div class="filters-group">
              <span class="filter-group-title">起飞时间</span>
              <div class="checkbox-lists">
              <span class="f-disabled check-label" v-for="(item,index) in time" :key="index">
                <el-checkbox v-model="item.status" :label=item.time size="large"/>
                <b class="icon-check"></b>
              </span>
              </div>
            </div>
            <div class="filters-group">
              <span class="filter-group-title">航空公司</span>
              <div class="checkbox-lists">
              <span class="enable check-label" v-for="(item,index) in companyList" >
                <el-checkbox v-model=sz[index] :label=item size="large"/>
                <b class="icon-check"></b>
              </span>

              </div>
            </div>
            <div class="filters-group">
              <span class="filter-group-title">起飞机场</span>
              <div class="checkbox-lists">
              <span class="enable check-label">
                <b class="icon-check"></b>
                <span class="checkbox-label" style="color: #606266;font-size: 14px">蓬莱国际机场T2</span>
              </span>
              </div>
            </div>
            <div class="filters-group">
              <span class="filter-group-title">降落机场</span>
              <div class="checkbox-lists">
              <span class="enable check-label">
                <b class="icon-check"></b>
                <span class="checkbox-label" style="color: #606266;font-size: 14px">萧山机场T3</span>
              </span>
              </div>
            </div>
          </div>
        </div>
      </div>

<!--      内容右-->
      <div class="dataListContainer">
        <div class="top-flight-info">
          <strong>单程：烟台 <b class="to-line"></b>杭州</strong>
        </div>

        <div class="sort-btns">
          <span class="sort-item child0 asc">
            <i>起飞时间</i>
            <b class="top-icon cursor-pointer"></b>
          </span>
          <span class="sort-item child1 asc">
            <i>到达时间</i>
            <b class="top-icon cursor-pointer"></b>
          </span>
          <span class="sort-item child2 asc curr">
            <i>价格</i>
            <b class="top-icon cursor-pointer"></b>
          </span>
        </div>


        <div class="flight-lists-container" v-for="item in planeArr" :key="item.id">
          <div class="flight-item">
            <div class="flight-item-head" data-v-8509203a="">
              <div class="head-item-info" data-v-8509203a="">
                <div data-v-8509203a="">
                  <div class="flight-name-new" data-v-8509203a="">
                    <div class="logo-part" data-v-8509203a="">
                      <i class="logo-item g-air-company-logo" style="background-image: url(https://m.elongstatic.com/flight/configmng/prod/airline/logo/CA.svg?v=2025010101);" data-v-8509203a=""></i>
                    </div>
                    <div class="sec-part" data-v-8509203a="">
                      <p class="flight-item-name" data-v-8509203a="">{{item.name+item.flight}}</p>
                      <span class="flight-item-type" data-v-8509203a="">空客320(中)</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="head-times-info" data-v-8509203a="">
                <div class="f-startTime f-times-con" data-v-8509203a="">
                  <strong data-v-8509203a="">{{ item.departureTime }}</strong>
                  <em data-v-8509203a="" class="">{{item.flyAirport}}</em>
                </div>
                <div class="f-line-to" data-v-8509203a="">
                  <i data-v-8509203a="">0h55m</i>
                  <b class="to-line" data-v-8509203a=""></b>
                </div>
                <div class="f-endTime f-times-con" data-v-8509203a="">
                  <strong data-v-8509203a="">{{ item.arrivalTime }}</strong>
                  <em data-v-8509203a="" class="">{{ item.landAirport }}</em>
                </div>
              </div>
              <div class="red-labels" data-v-8509203a="">
                <span class="label-tip" data-v-8509203a="">{{ item.snack==0?'无小食':'有小食' }}</span>
              </div>
              <div class="head-prices" data-v-8509203a="">
                <strong data-v-8509203a="">
                  <em data-v-8509203a="" style="color: #ff5346">¥{{ item.price }}</em>
                </strong>
                <i class="gray-style" data-v-8509203a="">4折经济舱</i>
              </div>
              <div class="buy-btn" data-v-8509203a="">
                <span class="btn-select" data-v-8509203a="" @click="buy(item.id)">选择<strong class="reduce-money" style="display:none;" data-v-8509203a="">立减0</strong></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dataContainter{
  width: 1190px;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  .dataListContainer{
    flex: 1;
    .top-flight-info {
      height: 34px;
      background: #ebebeb;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
    .sort-btns{
      user-select: none;
      height: 46px;
      font-size: 14px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e4e4e4;
      background: #fff;
      box-sizing: border-box;
      .sort-item.child0{
        margin-left: 240px;
      }
      .sort-item.child1 {
        margin-left: 120px;
      }
      .sort-item.child2 {
        margin-left: 197px;
        color: #00c77b;
      }
    }
    .flight-item{
      display: flex;
      background: #fff;
      margin-bottom: 10px;
      flex-direction: column;
    }
  }
}
:deep(.el-checkbox){
  height: 25px;
}
.flight-item-head{
  display: flex;
  min-height: 108px;
  position: relative;
}
.head-item-info {
  margin-right: 30px;
  margin-left: 30px;
  text-align: center;
  .logo-item {
    width: 24px;
    height: 24px;
    background: red;
    background: url(https://file.40017.cn/assets/public/logo/img/16_new_20200225.png) no-repeat;
    display: inline-block;
    margin-left: 2px;
  }
  .flight-name-new {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    width: 180px;
    .sec-part[data-v-8509203a] {
      -webkit-box-flex: 1;
    }
  }
  .flight-item-name {
    font-size: 14px;
    font-weight: 700;
  }
  .flight-item-type[data-v-8509203a] {
     font-size: 14px;
     color: #999;
  }
}
.g-air-company-logo {
  background-size: contain !important;
  background-position: 50% !important;
  background-repeat: no-repeat !important;
}
.head-times-info {
  display: flex;
  align-items: center;
  width: 256px;
  justify-content: space-between;
  .f-line-to {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    i{
      color: #999;
      position: relative;
    }
  }
  .to-line {
    width: 73px;
    height: 6px;
    background: url() no-repeat 50%;
  }
}
.head-item-info, .head-item-info-side{
  display: flex;
  align-items: center;
}
.red-labels, .red-labels .label-tip {
  display: flex;
  width: 90px;
  align-items: center;
  justify-content: center;
}
.red-labels {
  flex-direction: column;
  margin-left: 60px;
  margin-right: 30px;
}
.head-prices {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-right: 16px;
  padding: 16px 0;
  width: 106px;
  white-space: nowrap;
  text-align: center;
}
.buy-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-direction: column;
  .btn-select {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 32px;
    background: #ff9a33;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    user-select: none;
  }
}
.f-times-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  strong{
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 4px;
  }
  em{
    font-size: 12px;
    color: #999;
  }
}
.checkbox-lists{
  display: flex;
  flex-direction: column;
}
</style>